<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .deng{
            width: 19.72222%;
            height: 28.4347%;
            position: absolute;
            top:10%;
            left:42%;
        }
        .green{
            width:12.77777778%;
            height: 8.782608696%;
            position: absolute;
            top:28%;
            left:46%;
            display: none;
        }
        .yellow{
            width:12.77777778%;
            height: 8.782608696%;
            position: absolute;
            top:20%;
            left:46%;
            display: none;
        }
        .red{
            width:12.77777778%;
            height: 8.782608696%;
            position: absolute;
            top:11%;
            left:46%;
            display: none;
        }
        .jishiqi{
            width: 35.972222%;
            height: 11.39130435%;
            position: absolute;
            top:3%;
            left:3%;
        }
        .time{
            font-size: 22px;
            color: white;
            position: absolute;
            top:9%;
            left:23%;
        }
        .ready{
            width: 38.88888%;
            height: 4.7826%;
            position: absolute;
            top:40%;
            left:33%;
        }
        .score{
            font-size: 22px;
            color: white;
            position: absolute;
            top:9%;
            left:32%;
        }
    </style>
</head>
<body>
<img src="img/ready.png" alt="" class="ready">
<img src="img/计时器.png" alt="" class="jishiqi">
<div class="time">60</div>
<div class="dengkuang">
    <img src="img/红绿灯.png" alt="" class="deng">
    <img src="img/绿灯.png" alt="" class="green">
    <img src="img/黄灯.png" alt="" class="yellow">
    <img src="img/红灯.png" alt="" class="red">
</div>
<div class="score">0</div>

<canvas id="canvas" width="500" height="500"></canvas>

<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/loading.js"></script>

<script>



    setTimeout(function(){
        $(".red").css("display","block");
        $(".yellow").css("display","block");
    },1000);

    setTimeout(function(){
        $(".yellow").css("display","none");

    },2000);

    setTimeout(function(){
        $(".green").css("display","block");
    },2000);




    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    //屏幕宽高
    var SCREEN_WIDTH = document.documentElement.clientWidth;
    var SCREEN_HEIGHT = document.documentElement.clientHeight;

    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;

    loading({
        line:"img/line.png",
        saidao:"img/saidao.png",
        car:"img/car.png",
        btn1:"img/btn1.png",
        btn2:"img/btn2.png",
        speedBtn:"img/speedBtn.png",
        slowBtn:"img/slowBtn.png",
        luzhang:"img/luzhang.png",
        car1: "img/car1.png",
        car2: "img/car2.png",
        car3: "img/car3.png"
    },{
        complete:main
    });

    function main(obj) {
        carImg = obj.car;
        var car = {
            img: carImg,
            w: carImg.width/2,
            h: carImg.height/2,
            x: SCREEN_WIDTH / 2 - carImg.width / 2 +30,
            y: SCREEN_HEIGHT - carImg.height - 100
        };
        btn1Img = obj.btn1;
        var btn1 = {
            img: btn1Img,
            w: btn1Img.width/2,
            h: btn1Img.height/2,
            x: SCREEN_WIDTH / 2 - btn1Img.width / 2 - 40,
            y: SCREEN_HEIGHT - btn1Img.height - 40
        };
        btn2Img = obj.btn2;
        var btn2 = {
            img: btn2Img,
            w: btn2Img.width/2,
            h: btn2Img.height/2,
            x: SCREEN_WIDTH / 2 - btn2Img.width / 2 + 120,
            y: SCREEN_HEIGHT - btn2Img.height - 40
        };
        speedBtnImg = obj.speedBtn;
        var speedBtn = {
            img: speedBtnImg,
            w: speedBtnImg.width/2,
            h: speedBtnImg.height/2,
            x: SCREEN_WIDTH / 2 - speedBtnImg.width / 2 + 250,
            y: SCREEN_HEIGHT - speedBtnImg.height - 40
        };
        slowBtnImg = obj.slowBtn;
        var slowBtn = {
            img: slowBtnImg,
            w: slowBtnImg.width/2,
            h: slowBtnImg.height/2,
            x: SCREEN_WIDTH / 2 - speedBtnImg.width / 2 + 250,
            y: SCREEN_HEIGHT - speedBtnImg.height - 140
        };

        ctx.drawImage(obj.saidao, 0, scrollY, SCREEN_WIDTH, SCREEN_HEIGHT);
        ctx.drawImage(obj.saidao, 0, scrollY - SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);

        // 画车
        ctx.drawImage(car.img, car.x, car.y , car.w, car.h );
        //左按钮
        ctx.drawImage(btn1.img,btn1.x,btn1.y,btn1.w,btn1.h);
        //右按钮
        ctx.drawImage(btn2.img,btn2.x,btn2.y,btn2.w,btn2.h);
        //加速
        ctx.drawImage(speedBtn.img,speedBtn.x,speedBtn.y,speedBtn.w,speedBtn.h);
        //减速
//        ctx.drawImage(slowBtn.img,slowBtn.x,slowBtn.y,slowBtn.w,slowBtn.h);
    }



    setTimeout(function(){
        $(".dengkuang").css("display","none");
        $(".ready").animate({
            top:-50,
            opacity:0
        });
        daojishi();

        // 用来标记动画是否执行
        var start = true;

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        //屏幕宽高
        var SCREEN_WIDTH = document.documentElement.clientWidth;
        var SCREEN_HEIGHT = document.documentElement.clientHeight;

        canvas.width = SCREEN_WIDTH;
        canvas.height = SCREEN_HEIGHT;


        //倒计时
        function daojishi(){
            var t = 60;
            var timer = null;
            timer=setInterval(function(){
                t--;
                $(".time").html(t);
                if (t==0){
                    clearInterval(timer);
                    start = false;
                    window.location.assign("guoguan.php");
                }
                if(start == false){
                    clearInterval(timer);
                }
            },1000);
        }




        loading({
            line:"img/line.png",
            saidao:"img/saidao.png",
            car:"img/car.png",
            jiasuzhuangtai:"img/jiasuzhuangtai.png",
            btn1:"img/btn1.png",
            btn2:"img/btn2.png",
            speedBtn:"img/speedBtn.png",
            slowBtn:"img/slowBtn.png",
            luzhang:"img/luzhang.png",
            car1: "img/car1.png",
            car2: "img/car2.png",
            car3: "img/car3.png"
        },{
            complete:main
        });


        function rand(min,max){
            return Math.floor(Math.random()*(max-min+1)+min);
        }


        function checkP(obj1, obj2) {
            if(Math.abs(obj1.x + obj1.w / 2 - (obj2.x + obj2.w / 2)) <= obj1.w / 2 + obj2.w / 2 && Math.abs(obj1.y + obj1.h / 2 - (obj2.y + obj2.h / 2)) <= obj1.h / 2 + obj2.h / 2) {
                return true;

            } else {
                return false;
            }
        }




        var a = 0;
        function main(obj) {
            carImg = obj.car;
            var car = {
                img: carImg,
                w: carImg.width/2,
                h: carImg.height/2,
                x: SCREEN_WIDTH / 2 - carImg.width / 2 +30,
                y: SCREEN_HEIGHT - carImg.height - 100
            };
            btn1Img = obj.btn1;
            var btn1 = {
                img: btn1Img,
                w: btn1Img.width/2,
                h: btn1Img.height/2,
                x: SCREEN_WIDTH / 2 - btn1Img.width / 2 - 40,
                y: SCREEN_HEIGHT - btn1Img.height - 40
            };
            btn2Img = obj.btn2;
            var btn2 = {
                img: btn2Img,
                w: btn2Img.width/2,
                h: btn2Img.height/2,
                x: SCREEN_WIDTH / 2 - btn2Img.width / 2 + 120,
                y: SCREEN_HEIGHT - btn2Img.height - 40
            };
            speedBtnImg = obj.speedBtn;
            var speedBtn = {
                img: speedBtnImg,
                w: speedBtnImg.width/2,
                h: speedBtnImg.height/2,
                x: SCREEN_WIDTH / 2 - speedBtnImg.width / 2 + 250,
                y: SCREEN_HEIGHT - speedBtnImg.height - 40
            };
            slowBtnImg = obj.slowBtn;
            var slowBtn = {
                img: slowBtnImg,
                w: slowBtnImg.width/2,
                h: slowBtnImg.height/2,
                x: SCREEN_WIDTH / 2 - speedBtnImg.width / 2 + 250,
                y: SCREEN_HEIGHT - speedBtnImg.height - 140
            };


            //敌车和路障
            function Enemy(){
                this.img = obj.car1;
                this.w = this.img.width/2;
                this.h = this.img.height/2;
                this.x = rand(50,SCREEN_WIDTH - this.w-50);
                this.y = -this.h;
                this.type = 2;
                this.speed = 5;
                this.length = 3;
                // 播放第几张，当这个值等于图片个数时，播放完成，应该把敌机删掉
                this.playIndex = 1;
            }
            Enemy.prototype.draw = function(){
                ctx.drawImage(this.img, this.x, this.y, this.w, this.h);
            };
            Enemy.prototype.move = function() {
                this.y += this.speed;
            };
            Enemy.prototype.canClear = function() {
                if(this.y >= SCREEN_HEIGHT) {
                    return true;
                } else {
                    return false;
                }
            };
            Enemy.prototype.changeType = function(type) {
                this.type = type;
                switch(this.type) {
                    case 1:
                        break;
                    case 2:
                        this.img = obj.car2;
                        this.w = this.img.width/2;
                        this.h = this.img.height/2;
                        this.x = rand(50, SCREEN_WIDTH - this.w-50);
                        this.y = -this.h;

                        break;
                    case 3:
                        this.img = obj.car3;
                        this.w = this.img.width/2;
                        this.h = this.img.height/2;
                        this.x = rand(50, SCREEN_WIDTH - this.w-50);
                        this.y = -this.h;

                        break;
                    case 4:
                        this.img = obj.luzhang;
                        this.w = this.img.width;
                        this.h = this.img.height;
                        this.x = rand(50, SCREEN_WIDTH - this.w-50);
                        this.y = -this.h;
                        break;
                    default:
                        break;
                }
            };


            //用于计分数组
            var enemys1 = [];
            var enemys = [];
            var scrollY = 0;
            var x = 0;
            var s = 5;
            function drawAll(){
                ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                scrollY+=s;
                if(scrollY >= SCREEN_HEIGHT) {
                    scrollY = 0;
                }
                x++;


                // 创建敌车
                if(x % 100 == 0) {
                    var enemy = new Enemy(obj.car1);
                    if(scrollY % 30 == 0) {
                        enemy.changeType(2);
                    } else if(scrollY % 50 == 0) {
                        enemy.changeType(3);
                    } else if(scrollY % 40 == 0){
                        enemy.changeType(4)
                    }
                    enemys.push(enemy);
                    enemys1.push(enemy);
                }

                ctx.drawImage(obj.saidao, 0, scrollY, SCREEN_WIDTH, SCREEN_HEIGHT);
                ctx.drawImage(obj.saidao, 0, scrollY - SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);



                // 画敌车
                for(var i = 0; i < enemys.length; i++) {
                    var enemy = enemys[i];
                    if(enemy.canClear()) {
                        enemys.splice(i, 1);
                        i--;
                    }
                    enemy.draw();
                    enemy.move();
                }

                //用于计分
                for(var k = 0; k < enemys1.length; k++){
                    var enemy1 = enemys1[k];
                    if((enemy1.y)>(car.y+car.h)){
                        a++;
                        enemys1.splice(k,1);
                        $(".score").html(a);
                    }
                }


                // 画车
                ctx.drawImage(car.img, car.x, car.y , car.w, car.h );
                //左按钮
                ctx.drawImage(btn1.img,btn1.x,btn1.y,btn1.w,btn1.h);
                //右按钮
                ctx.drawImage(btn2.img,btn2.x,btn2.y,btn2.w,btn2.h);
                //加速
                ctx.drawImage(speedBtn.img,speedBtn.x,speedBtn.y,speedBtn.w,speedBtn.h);


                // 检测汽车碰撞
                for(var i = 0; i < enemys.length; i++) {
                    if(checkP(car, enemys[i])) {
                        window.location.assign("meiguoguan.php");
                        start = false;

                    }
                }
                if(start) {
                    window.requestAnimationFrame(drawAll);
                }

            }
            drawAll();

            var m = 1;
            canvas.addEventListener("touchstart", function() {
                var x = event.touches[0].clientX;
                var y = event.touches[0].clientY;
                // 判断有没有点到按钮
                if(x >= btn1.x && x <= btn1.x + btn1.w && y >= btn1.y && y <= btn1.y + btn1.h) {

                        car.x-=50;
                        //汽车移动的边界
                        if(car.x >= (SCREEN_WIDTH - carImg.width * 0.6 - 50)){
                            car.x = SCREEN_WIDTH - carImg.width * 0.6 - 50;
                        }
                        if(car.x <= 50){
                            car.x = 50;
                        }

                }else if (x >= btn2.x && x <= btn2.x + btn2.w && y >= btn2.y && y <= btn2.y + btn2.h){

                        car.x+=50;
                        //汽车移动的边界
                        if(car.x >= (SCREEN_WIDTH - carImg.width * 0.6 - 30)){
                            car.x = SCREEN_WIDTH - carImg.width * 0.6 - 30;
                        }
                        if(car.x <= 50){
                            car.x = 50;
                        }
                }

                if(x >= speedBtn.x && x <= speedBtn.x + speedBtn.w && y >= speedBtn.y && y <= speedBtn.y + speedBtn.h){
                    m++;
                    if(m == 1 ){
                        s = 5;
                        car.img = obj.car;
                        speedBtn.img = obj.speedBtn;
                    }else if(m == 2){
                        s = 20;
                        speedBtn.img = obj.slowBtn;
                        car.img = obj.jiasuzhuangtai;
                        m = 0;
                    }
                }
            }, false);
        }
    },3000);











</script>
</body>
</html>